<template>
  <app-navigator default-path="normal/button" ref="navigatorRef">
    <article class="app-home">
      <section class="app-header">
       <span @click="goHome">vue3.0 UI</span>
      </section>
      <section class="app-menu">
         <app-menu/>
      </section>
      <section class="app-content">
        <app-navigator-page />
      </section>
    </article>
  </app-navigator>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import { AppNavigator } from './components/navigator/AppNavigator';
import { AppNavigatorPage } from './components/navigator/AppNavigatorPage';
import AppMenu from './components/app/AppMenu.vue';

export default defineComponent({
  name: 'App',
  components: {
    AppNavigator,
    AppNavigatorPage,
    AppMenu
  },
  methods: {
    goHome () {
      console.log(this.$refs.navigatorRef);
      (this.$refs.navigatorRef as any).$._refer.methods.go('home');
    }
  }
});
</script>

<style lang="scss">
$headerSize: 60px;
$menuSize: 300px;
.app-home {
  width: 100%;
  height: 100%;
  font-size: 24px;
  .app-header{
    height: $headerSize;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
  }
  .app-menu{
    position: fixed;
    top: $headerSize;
    left: 0;
    bottom: 0;
    width: $menuSize;
    overflow: auto;
    border-right: 1px solid #ccc;
  }
  .app-content{
    padding-top: $headerSize + 20px;
    padding-left: $menuSize + 20px;
    box-sizing: border-box;
  }
}
</style>
